<template>
  <el-container class="main-container">
    <!-- 左侧导航菜单 -->
    <el-aside width="200px" class="aside-container">
      <!-- 菜单组件 -->
      <Menu />
    </el-aside>
    <!-- 右侧主内容区 -->
    <el-container class="right-container">
      <!-- 顶部页签栏 -->
      <div class="tabs-wrapper">
        <Tabs />
      </div>
    
      <!-- 内容区域 -->
      <el-main class="content-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Menu from '../src/components/Menu.vue'
import Tabs from '../src/components/Tabs.vue'
</script>

<style scoped>
.main-container {
  height: 100vh;
  overflow: hidden;
}

.aside-container {
  background: #ffffff;
  border-right: 1px solid #e8e8e8;
  transition: width 0.3s;
}

.right-container {
  flex-direction: column;
}

.tabs-wrapper {
  height: 40px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.content-main {
  padding: 15px;
  background: #f0f2f5;
}
</style>